<template>
  <div id="shop-theme-1">
    <en-shop-header :shop="shop"/>
    <en-shop-sildes :shop-id="shop.shop_id"/>
    <en-shop-nav :shop="shop"/>
    <theme1-coupons :shop-id="shop.shop_id"/>
    <div class="shop-tags">
      <!--新品上架-->
      <div class="new-goods">
        <h3 class="title-new-goods">New Arrival</h3>
        <ul class="list-new-goods">
          <li v-for="(goods, index) in hotGoods" :key="index" class="item-new-goods">
            <div class="intro-new-goods">
              <h5>NO.{{ index + 1 }}</h5>
              <h3><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></h3>
              <p>RMB：<i>￥{{ goods.price }}</i></p>
            </div>
            <div class="img-new-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
          </li>
        </ul>
      </div>
      <!--推荐商品-->
      <div class="rec-goods">
        <h3 class="title-rec-goods"></h3>
        <ul class="list-rec-goods">
          <li v-for="(goods, index) in newGoods" :key="index" class="item-rec-goods">
            <div class="img-rec-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <div class="intro-rec-goods">
              <h5><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></h5>
              <p>RMB：<i>￥{{ goods.price | unitPrice }}</i><span>(销量：{{ goods.buy_count }})</span></p>
            </div>
          </li>
        </ul>
      </div>
      <!--推荐商品-->
      <div class="hot-goods">
        <h3 class="title-hot-goods"></h3>
        <ul class="list-hot-goods">
          <li v-for="(goods, index) in recGoods" :key="index" class="item-hot-goods">
            <div class="img-hot-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <div class="intro-hot-goods">
              <p><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></p>
              <span>RMB：<b>￥{{ goods.price | unitPrice }}</b></span> <i>已销售：{{ goods.buy_count }}件</i>
            </div>
          </li>
        </ul>
      </div>
      <nuxt-link :to="'/shop/goods-list?shop_id=' + shop_id" class="more-goods">更多本店商品 >></nuxt-link>
    </div>
    <div class="shop-detail">
      <h3>关于店铺</h3>
      <h6 v-html="shop.shop_desc || '暂无简介'"></h6>
    </div>
  </div>
</template>

<script>
  import mixin from './themeMixin'
  import theme1Coupons from './-theme1-coupons'
  export default {
    name: 'shop-theme-1',
    mixins: [mixin],
    components: { theme1Coupons }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  @import "../../../assets/styles/color";
  .new-goods {
    .title-new-goods {
      height: 6 * 16px;
      margin: 16px 0;
      width: 100%;
      text-align: center;
      line-height: 6 * 16px;
      background: url() no-repeat center center;
      background-size: 50%;
      font-size: 1.1 * 16px;
      font-weight: 300;
    }
    .list-new-goods {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      overflow: hidden;
    }
    .item-new-goods {
      float: left;
      display: flex;
      flex-direction: column;
      width: 46%;
      position: relative;
      padding: 0.6 * 16px 0;
      text-align: center;
      border-bottom: 1px solid #fff;
      &:nth-child(2n) {
        flex-direction: column-reverse;
      }
    }
    .intro-new-goods {
      h5 {
        font-size: 20px;
        width: 100%;
        height: 2 * 16px;
        line-height: 1.5 * 16px;
        text-align: center;
      }
      h3 {
        font-size: 0.9 * 16px;
        font-weight: 200;
        line-height: 1.2 * 16px;
        height: 2.5 * 16px;
        display: block;
        text-align: center;
        width: 90%;
        padding: 0 5%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        a { color: #53a0be }
      }
      p {
        font-size: 0.9 * 16px;
        font-weight: 200;
        line-height: 1.2 * 16px;
        width: 100%;
        text-align: center;
      }
    }
    .img-new-goods {
      img {
        width: 90%;
        margin: 0 auto;
        max-width: 200px;
      }
    }
  }
  .rec-goods {
    border-top: 10px solid #e5e5e5;
    .title-rec-goods {
      width: 100%;
      height: 3 * 16px;
      margin: 16px 0;
      background: url() no-repeat center center #fff;
      background-size: 80%;
    }
    .item-rec-goods {
      width: 80%;
      margin: 0 0 8px 0;
      padding: 16px 10% 8px;
      border-bottom: 1px dashed #dedede;
      text-align: center;
    }
    .img-rec-goods {
      img {
        width: 80%;
        border-radius: 30 * 16px;
        box-shadow: -2px 1px 16px #dedede;
        margin: 0 0 8px 0;
      }
    }
    .intro-rec-goods {
      a {
        width: 100%;
        height: 2.5 * 16px;
        line-height: 1.2 * 16px;
        text-align: center;
        font-size: 16px;
        font-weight: 300;
        display: block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #53a0be
      }
      p span {
        color: #bbb;
        font-size: 0.8 * 16px;
      }
    }
  }
  .hot-goods {
    border-top: 10px solid #e5e5e5;
    width: 90%;
    padding: 16px 5%;
    background: #fff;
    .title-hot-goods {
      width: 100%;
      height: 3 * 16px;
      background: url() no-repeat center center;
      background-size: 80%;
    }
    .item-hot-goods {
      width: 100%;
      position: relative;
      margin: 16px 0 9 * 16px 0;
    }
    .img-hot-goods {
      background: #fff;
      width: 13rem;
      height: 13rem;
      position: absolute;
      top: 8 * 16px;
      right: 0;
      text-align: center;
      border: 1px solid #ddd;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .intro-hot-goods {
      width: 12 * 16px;
      padding: 16px;
      border: 1px dashed #ddd;
      height: 12 * 16px;
      a {
        width: 12 * 16px;
        text-align: left;
        margin: 2 * 16px 0 0 0;
        display: block;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.5 * 16px;
        color: #53a0be;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      span {
        font-size: 0.8 * 16px;
        font-weight: 300;
        line-height: 1.5 * 16px;
        margin: 8px 0;
        display: block;
      }
      b {
        font-size: 16px;
      }
    }
  }
  .shop-detail {
    text-align: center;
    font-weight: 200;
    width: 90%;
    overflow: hidden;
    margin: 0 0 3 * 16px 0;
    background: #fff;
    padding: 8px 5%;
    border-top: 10px solid #e5e5e5;
    img {
      object-fit: cover;
    }
    h3 {
      font-size: 16px;
      line-height: 32px;
      font-weight: 200;
      color: #000;
    }
    h6 {
      font-size: 0.7 * 16px;
      line-height: 32px;
      font-weight: 200;
      color: #ccc;
    }
  }
</style>
